<template>
    <div class="item-view" v-if="item">
        <template v-if="item">
            <div class="item-view-header">
                <a :href="item.url" target="_blank">
                    <h1>{{ item.title }}</h1>
                </a>
                <span v-if="item.url" class="host">({{ item.url }})</span>
                <p class="meta">
                    {{ item.time ? item.time : '未知的时间' + '|' + item.author }}
                </p>
            </div>
            <div class="item-view-comments">
                <p class="item-view-comments-header">
                    {{ item.content }}
                </p>
            </div>
            <router-link to="/" style="float: right">返回</router-link>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'news-detail',
        data () {
            return {}
        },
        computed: {
            item () {
                return this.$store.state.news.newsList[this.$route.params.id]
            }
        },
    }
</script>

<style lang="stylus">
    .item-view-header
        background-color #fff
        padding 1.8em 2em 1em
        box-shadow 0 1px 2px rgba(0, 0, 0, .1)
        h1
            display inline
            font-size 1.5em
            margin 0
            margin-right .5em
        .host, .meta, .meta a
            color #999
        .meta a
            text-decoration underline

    .item-view-comments
        background-color #fff
        margin-top 10px
        padding 0 2em .5em

    .item-view-comments-header
        margin 0
        font-size 1.1em
        padding 1em 0
        position relative
        .spinner
            position absolute
            top 0
            right 0
            bottom auto

    .comment-children
        list-style-type none
        padding 0
        margin 0

    @media (max-width 600px)
        .item-view-header
            h1
                font-size 1.25em
</style>
